// import WMap from '../../map';
import{
	heatDatas
} from './data.js';
const blur = document.getElementById('blur')
const radius = document.getElementById('radius')

const addHeatLayer = document.getElementById('addHeatLayer');
const removeHeatLayer = document.getElementById('removeHeatLayer');
const addMarker = document.getElementById('addMarker');
const removeMarker = document.getElementById('removeMarker');

const map = new WMap.Map('map', {
	center: new WMap.LngLat(116.388574, 39.933931), //地图中心- 北京
	zoom: 11, //地图缩放层级
	minZoom: 0, // 最小可缩放层级
	maxZoom: 18, // 最大可缩放层级
	doubleClickZoom: true, // 是否双击放大
	zoomShow: true, // 是否显示缩放控件
	rotateShow: true, // 是否显示旋转复位控件
	fullScreen: true, // 是否显示全屏控件
	maxExtent: true, // 是否限制地图可拖动范围 - 关联 mouseMoveExtent
	mouseMoveExtent: [
		[10.571664, 0.747024],
		[177.916617, 89.028265]
	]
})

// 最后渲染的覆盖物数组
let markersList = [];
map.on('complete', function () {
	// 地图图块加载完成后触发
	console.log('map：complete-----')
})

map.on('click', e => {
	console.log(e.lngLat)
})

map.on('moveend', e => {
  console.log(e.target.getView().getZoom());
})

map.on('zoom', e => {
  console.log(e);
})

blur &&
	(blur.onchange = e => {
    console.log(e.target.value, parseInt(blur.value, 10));
		map.setBlur(parseInt(e.target.value, 10))
	})

radius &&
  (radius.onchange = e => {
    console.log(e.target.value, parseInt(radius.value, 10));
    map.setRadius(parseInt(e.target.value, 10))
  })

addHeatLayer.addEventListener('click', () => {
  map.setBaseLayer('heatmap');
})
removeHeatLayer.addEventListener('click', () => {
  map.removeLayer('heatmap');
})
addMarker.addEventListener('click', () => {
  heatDatas.forEach(item => {
    const marker = new WMap.Marker({
      position: [item.lng, item.lat]
    })
    markersList.push(marker);
  })
  map.add(markersList, 'heatmap');
})
removeMarker.addEventListener('click', () => {
  map.remove(markersList, 'heatmap');
})